<template>
  <div class="user-center">
    <!-- 个人中心头部 -->
    <div class="user-center-header">
      <div class="user-center-header-content">
        <p>
          <i class="el-icon-user" style="font-size: 30px;color: #ff6700;"></i>
          个人中心
        </p>
      </div>
    </div>
    <!-- 个人中心头部END -->

    <!-- 个人中心主要内容 -->
    <div class="user-center-content">
      <el-container class="content">
        <el-aside>
          <el-menu router>
            <el-menu-item-group>
              <div class="menu-title">
                <template #title
                  ><i class="el-icon-s-custom" style="color: #ff6700;"></i>
                  用户管理</template
                >
              </div>
              <el-menu-item index="/mall/info">个人信息</el-menu-item>
              <el-menu-item index="/mall/address">我的地址</el-menu-item>
              <el-menu-item index="/mall/security">账户安全</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <div class="menu-title">
                <template #title
                  ><i class="el-icon-s-goods" style="color: #ff6700;"></i>
                  购物中心</template
                >
              </div>
              <el-menu-item index="/mall/order">订单管理</el-menu-item>
              <el-menu-item index="/mall/coupon">优惠券管理</el-menu-item>
              <el-menu-item index="/mall/shoppingCart">我的购物车</el-menu-item>
            </el-menu-item-group>
          </el-menu>
        </el-aside>
        <el-main>
          <keep-alive inclue="">
            <router-view></router-view>
          </keep-alive>
        </el-main>
      </el-container>
    </div>
    <!-- 个人中心主要内容END -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      //以下字段和mms_user表中字段相同即可
      mall_user: {
        id: '',
        account: '',
        salt: '',
        name: '',
        password: '',
        email: '',
        phone: '',
        age: '',
        sex: ''
      }
    }
  },
  created() {
    // 从vuex中获取个人信息!!误删
    this.getMallUserInfo()
  },
  methods: {
    // 从vuex中获取个人信息!!误删
    getMallUserInfo() {
      this.mall_user = this.$store.getters.getUser
    }
  }
}
</script>
<style scoped>
.user-center {
  background-color: #f5f5f5;
  padding-bottom: 20px;
}
/* 个人中心头部CSS */
.user-center .user-center-header {
  height: 64px;
  border-bottom: 2px solid #ff6700;
  background-color: #fff;
  margin-bottom: 20px;
}
.user-center .user-center-header .user-center-header-content {
  width: 1225px;
  margin: 0 auto;
}
.user-center .user-center-header p {
  font-size: 28px;
  line-height: 58px;
  float: left;
  font-weight: normal;
  color: #424242;
}
/* 个人中心头部CSS END */

/* 个人中心整体页面CSS */
.user-center .user-center-content {
  width: 1225px;
  margin: 0 auto;
}

/* 设置个人中心主体位置*/
.user-center .user-center-content .content {
  height: 500px;
  color: #b0b0b0;
  overflow: hidden;
}

/* 设置个人中心主体样式*/
.user-center .content .el-aside {
  float: left;
  height: 500px;
  text-align: center;
  margin: 0 10px 0 0;
}

.user-center .content .el-aside .menu-title {
  background-color: #fffbf0;
  color: black;
  font-weight: bold;
  font-size: 30px;
  height: 50px;
  line-height: 50px;
}

.user-center .content .el-main {
  float: right;
  margin: 0 40px;
}
/* 个人中心整体页面CSS END */
</style>
